<script setup lang="ts">
import situation from "@/pages/deduct/components/situationTuiyan/index.vue"
import assessmentInfoTab from "@/pages/deduct/components/assessmentInfoTab.vue"
import { startTaskApi, pauseTaskApi, endTaskApi } from "@@/apis/train/index"
import { createGuid } from "@@/utils/tools";
import { parseSecondToFormat } from "@@/utils/datetime"
import { useRoute, onBeforeRouteLeave } from "vue-router"
import { ref, onActivated, watch, onBeforeUnmount } from "vue"
import DataCollect from '@/pages/deduct/components/dataCollect.vue'
// import EcgEcharts from '@/pages/deduct/components/ecgEcharts.vue'
import { customStomp } from "@@/utils/CustomStomp.ts";
import { simulationStateTuiyan } from "@@/store-tuiyan/modules/simulation";
import { rmqStateTuiyan } from "@@/store-tuiyan/modules/rmq";
import { cesiumListlInfoStore } from "@@/store-tuiyan/modules/cesiumList";

import * as echarts from 'echarts'
import { RabbitMq_Config } from "@/../public/config";
interface Props {
  ruleForm: any
  isEdit?: boolean
}
const props = defineProps<Props>()
const route = useRoute()
const childRef = ref()
const chartLine = ref(null)
const chartPie1 = ref(null)
const chartPie2 = ref(null)
const chartPie3 = ref(null)
const chartPie4 = ref(null)
const chartPie5 = ref(null)
const situationTuiyan = ref()
const formData = ref({
  single_round_duration: 0,
  task_round: 0,
  task_number: 0,
  maxRound: 0,
  createTime: '00:00:00',
  used_worker_num: 0,
  remaining_worker_num: 0,
  task_process: 0,
  task_status: 0
})

// 添加计时器相关变量
let timer: NodeJS.Timeout | null = null;
let startTime: number = 0;

// 开始计时
const startTimer = (isManualStart: boolean = false) => {
  if (timer) return;

  // 如果是手动开始（点击开始按钮），使用当前时间
  if (isManualStart) {
    startTime = Date.now();
  } else {
    // 如果是页面刷新且任务状态为1，使用task_start_time
    if (props.ruleForm.task_start_time) {
      startTime = new Date(props.ruleForm.task_start_time).getTime();
    } else {
      startTime = Date.now();
    }
  }

  timer = setInterval(() => {
    const elapsedTime = Date.now() - startTime;
    const seconds = Math.floor(elapsedTime / 1000);
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const remainingSeconds = seconds % 60;
    formData.value.createTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
  }, 1000);
};

// 停止计时
const stopTimer = () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
};


// 组件卸载时清理计时器
onBeforeUnmount(() => {
  stopTimer();
});

// 初始化rmq连接
const rmqUsername = RabbitMq_Config.username
const rmqPassword = RabbitMq_Config.password
const rmqHost = RabbitMq_Config.host
const rmqStore = {
  getRmqUrl: 'ws://' + RabbitMq_Config.ip + ':15674/ws'
}
const selectValue = ref(1)
const clientId = createGuid()
const task_id = route.query.id as string
const queue = computed(() => {
  return `current.${route.query.id}.process`;
})
const queueStatus = computed(() => {
  return `current.${route.query.id}.status`;
})
const queueCollection = computed(() => {
  return `current.${route.query.id}.collection`;
})
const queueSituation = computed(() => {
  return `current.${route.query.id}.situation`;
})
let rmqTimer: NodeJS.Timeout | undefined = undefined
const playPause = ref(false)
const single_round_duration = ref<number>()  //剩余运行时长

const playLoading = ref<boolean>(false)

const simulStore = simulationStateTuiyan();
const store = cesiumListlInfoStore()
const rmqStores = rmqStateTuiyan();
// 折线图
const getChartLine = () => {
  const myChart = echarts.init(chartLine.value)
  const option = {
    backgroundColor: '#0d1a26', // 深色背景
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#0d1a26',
      borderColor: '#3e3e3e',
      textStyle: {
        color: '#fff',
      },
      formatter: function (params: any) {
        const month = params[0].axisValue;
        const yearMonth = `2020/${month.padStart(2, '0')}`;
        let result = `${yearMonth}<br/>`;
        params.forEach(item => {
          result += `${item.marker}${item.seriesName}：${item.data}<br/>`;
        });
        return result;
      }
    },
    legend: {
      data: ['主要目标完成率', '次要目标完成率'],
      textStyle: {
        color: '#fff',
      },
      top: 10,
      right: 20,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: { lineStyle: { color: '#ccc' } },
      axisLabel: { color: '#ccc' },
      data: Array.from({ length: 12 }, (_, i) => (i + 1).toString()),
    },
    yAxis: {
      type: 'value',
      name: '%(单位)',
      nameTextStyle: {
        color: '#ccc',
        fontSize: 14,
        padding: [0, 40, 0, 0],
      },
      axisLine: { lineStyle: { color: '#ccc' } },
      axisLabel: { color: '#ccc', align: 'right', margin: 16 },
      splitLine: {
        lineStyle: {
          color: '#333',
        },
      },
    },
    color: ['#3a80f8', '#41d1c8'],
    series: [
      {
        name: '主要目标完成率',
        type: 'line',
        smooth: false, // 折线，不是平滑曲线
        symbol: 'circle',
        symbolSize: 6,
        itemStyle: {
          color: '#3a80f8',
        },
        lineStyle: {
          width: 2,
        },
        areaStyle: {
          opacity: 0.2,
          color: '#3a80f8',
        },
        data: [580, 900, 400, 800, 980, 300, 700, 860, 540, 750, 600, 400],
      },
      {
        name: '次要目标完成率',
        type: 'line',
        smooth: false,
        symbol: 'circle',
        symbolSize: 6,
        itemStyle: {
          color: '#41d1c8',
        },
        lineStyle: {
          width: 2,
        },
        areaStyle: {
          opacity: 0.2,
          color: '#41d1c8',
        },
        data: [480, 760, 350, 700, 640, 250, 500, 660, 440, 650, 500, 300],
      },
    ],
  }

  myChart.setOption(option)

  window.addEventListener('resize', () => {
    myChart.resize()
  })
}
const getChartPie1 = () => {
  const myChart = echarts.init(chartPie1.value)

  const option = {
    backgroundColor: '#0d1a26', // 深色背景
    title: {
      text: '侦查能力\n1000',
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold',
        rich: {
          a: {
            fontSize: 14,
            color: '#aaa'
          },
          b: {
            fontSize: 20,
            fontWeight: 'bold',
            color: '#fff',
          }
        }
      }
    },
    series: [
      {
        name: '侦查能力',
        type: 'pie',
        radius: ['60%', '80%'], // 内圈和外圈大小
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 300, name: '蓝色部分', itemStyle: { color: '#3a80f8' } },
          { value: 100, name: '青色部分', itemStyle: { color: '#41d1c8' } },
        ],
      }
    ]
  }

  myChart.setOption(option)

  window.addEventListener('resize', () => {
    myChart.resize()
  })
}
const getChartPie2 = () => {
  const myChart = echarts.init(chartPie2.value)

  const option = {
    backgroundColor: '#0d1a26', // 深色背景
    title: {
      text: '侦查能力\n1000',
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold',
        rich: {
          a: {
            fontSize: 14,
            color: '#aaa'
          },
          b: {
            fontSize: 20,
            fontWeight: 'bold',
            color: '#fff',
          }
        }
      }
    },
    series: [
      {
        name: '侦查能力',
        type: 'pie',
        radius: ['60%', '80%'], // 内圈和外圈大小
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 300, name: '蓝色部分', itemStyle: { color: '#3a80f8' } },
          { value: 100, name: '青色部分', itemStyle: { color: '#41d1c8' } },
        ],
      }
    ]
  }

  myChart.setOption(option)

  window.addEventListener('resize', () => {
    myChart.resize()
  })
}
const getChartPie3 = () => {
  const myChart = echarts.init(chartPie3.value)

  const option = {
    backgroundColor: '#0d1a26', // 深色背景
    title: {
      text: '侦查能力\n1000',
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold',
        rich: {
          a: {
            fontSize: 14,
            color: '#aaa'
          },
          b: {
            fontSize: 20,
            fontWeight: 'bold',
            color: '#fff',
          }
        }
      }
    },
    series: [
      {
        name: '侦查能力',
        type: 'pie',
        radius: ['60%', '80%'], // 内圈和外圈大小
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 300, name: '蓝色部分', itemStyle: { color: '#3a80f8' } },
          { value: 100, name: '青色部分', itemStyle: { color: '#41d1c8' } },
        ],
      }
    ]
  }

  myChart.setOption(option)

  window.addEventListener('resize', () => {
    myChart.resize()
  })
}
const getChartPie4 = () => {
  const myChart = echarts.init(chartPie4.value)

  const option = {
    backgroundColor: '#0d1a26', // 深色背景
    title: {
      text: '侦查能力\n1000',
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold',
        rich: {
          a: {
            fontSize: 14,
            color: '#aaa'
          },
          b: {
            fontSize: 20,
            fontWeight: 'bold',
            color: '#fff',
          }
        }
      }
    },
    series: [
      {
        name: '侦查能力',
        type: 'pie',
        radius: ['60%', '80%'], // 内圈和外圈大小
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 300, name: '蓝色部分', itemStyle: { color: '#3a80f8' } },
          { value: 100, name: '青色部分', itemStyle: { color: '#41d1c8' } },
        ],
      }
    ]
  }

  myChart.setOption(option)

  window.addEventListener('resize', () => {
    myChart.resize()
  })
}
const getChartPie5 = () => {
  const myChart = echarts.init(chartPie5.value)

  const option = {
    backgroundColor: '#0d1a26', // 深色背景
    title: {
      text: '侦查能力\n1000',
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold',
        rich: {
          a: {
            fontSize: 14,
            color: '#aaa'
          },
          b: {
            fontSize: 20,
            fontWeight: 'bold',
            color: '#fff',
          }
        }
      }
    },
    series: [
      {
        name: '侦查能力',
        type: 'pie',
        radius: ['60%', '80%'], // 内圈和外圈大小
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 300, name: '蓝色部分', itemStyle: { color: '#3a80f8' } },
          { value: 100, name: '青色部分', itemStyle: { color: '#41d1c8' } },
        ],
      }
    ]
  }

  myChart.setOption(option)

  window.addEventListener('resize', () => {
    myChart.resize()
  })
}
// 心电图
const siml_times = ref<any[]>([])
const series = ref<any[]>([])

// 任务控制按钮不允许点击
const notAllowClick = computed(() => {
  return playLoading.value
})
// 开始任务
const handlePlay = () => {
  if (notAllowClick.value) return
  playLoading.value = true
  startTaskApi(route.query.id as string)
    .then((res: any) => {
      if (res.code === 200) {
        playPause.value = true
        subscribe()
        formData.value.task_status = 1
        formData.value.task_process = 0
        formData.value.task_round = 0
        simulStore.setTaskStutas(1)
        simulStore.setTaskRound(1)
        simulStore.setAllRound(1)
        simulStore.reAllStepsList()
        startTimer(true); // 传入true表示是手动开始
        playLoading.value = false
        childRef.value.getProcessevalSearch()
      } else {
        playPause.value = false
        playLoading.value = false
      }
    })
    .catch((e: any) => {
      playPause.value = false
    })
    .finally(() => {
      playLoading.value = false
    })
}
//暂停任务
const handlePause = () => {
  if (notAllowClick.value) return
  pauseTaskApi(route.query.id as string)
    .then((res: any) => {
      if (res.code === 200) {
        playPause.value = false
        formData.value.task_status = 2
        stopTimer(); // 停止计时
        customStomp.unsubscribe(clientId, queueStatus)
        customStomp.unsubscribe(clientId, queue)
        childRef.value.getProcessevalSearch()
      } else {
        ElMessage.error(res.msg)
        playPause.value = true
      }
    })
    .catch((e: any) => {
      ElMessage.error(e)
      playPause.value = true
    })
}
//停止任务
const handleStop = () => {
  if (notAllowClick.value) return
  if (formData.value.task_status == 2 || formData.value.task_status == 3) {
    ElMessage.warning("任务不在运行中")
    return
  }
  endTaskApi(route.query.id as string)
    .then((res: any) => {
      if (res.code) {
        playPause.value = false
        formData.value.task_process = 0
        stopTimer(); // 停止计时
        customStomp.unsubscribe(clientId, queueStatus.value)
        customStomp.unsubscribe(clientId, queue.value)
      } else {
        ElMessage.error(res.msg)
        playPause.value = true
      }
    })
    .catch((e: any) => {
      ElMessage.error(e)
      playPause.value = true
    })
}
const getTaskStatus = () => {
  if (Number(props.ruleForm.task_process) > 0) {
    playPause.value = true
  }
}
const initStompConnect = () => {
  const headers = {
    login: rmqUsername,
    passcode: rmqPassword,
    //虚拟主机，默认"/"
    host: rmqHost,
  },
    ws = rmqStore.getRmqUrl;
  /// 创建客户端0
  customStomp.createClient(ws, clientId);
  /// 连接, 放入连接成功和失败回调函数
  customStomp.connect(
    clientId,
    headers,
    onConnected,
    onErrorConnected
  );
}
// 成功回调
const onConnected = () => {
  // 清掉计时器
  rmqTimer && clearInterval(rmqTimer);
  // 设置连接状态为成功
  rmqStores.setConnectState(true);
}
// 失败回调
const onErrorConnected = () => {
  // 清掉计时器
  rmqTimer && clearInterval(rmqTimer);
  // 重新连接
  initStompConnect()
}

// mq态势的推送进度条消息
const handleMessage = (frame: any) => {
  const message = JSON.parse(frame.body);
  const aa = JSON.parse(message.worker_res_info)
  console.log(aa, 'aaa');

  formData.value.used_worker_num = Number(aa.used_worker_num)
  formData.value.remaining_worker_num = Number(aa.remaining_worker_num)
  const maxRound = props.ruleForm.inference_config.episode_config.max_episode
  const curRound = message.round
  const yi = (maxRound - curRound) * message.single_round_duration
  single_round_duration.value = yi
  childRef.value.getProcessevalSearch()
};

// mq态势的推送任务状态消息
const handleMessageStatus = (frame: any) => {
  try {
    const message = JSON.parse(JSON.parse(frame.body));
    if (message.task_status === 3) {
      ElMessage.error("任务错误")
    }
    if (message.task_status === 2 || message.task_status === 3) {
      formData.value.task_status = message.task_status
      simulStore.setTaskStutas(message.task_status)
      stopTimer();
      formData.value.task_process = 100;
    }
    if (message.task_process != undefined) {
      formData.value.task_process = message.task_process
    }
    if (message.task_round != undefined) {
      formData.value.task_round = message.task_round
      simulStore.setAllRound(message.task_round)
    }
  } catch (error) {
  }
};

// mq态势的推送数据采集消息
const handleMessageCollection = (frame: any) => {
  const message = JSON.parse(frame.body);
  siml_times.value = [...message.siml_times]
  series.value = [...message.series]
}

// mq态势的推送实体消息
const handleMessageSituation = async (frame: any) => {
  const message = JSON.parse(frame.body);
  if (message.round_number === selectValue.value) {
    // 如果任务正在运行且当前选择的局数等于正在运行的局数，则使用实时模式
    await situationTuiyan.value.animationStatic(message)
  }
}

// 订阅消息
const subscribe = () => {
  // 使用customStomp订阅消息
  customStomp.subscribe(
    clientId,     // 客户端ID
    queueStatus.value,        // 队列名称作为订阅ID
    `/queue/${queueStatus.value}`,     // 交换机名称作为目标地址
    handleMessageStatus // 消息处理回调函数
  );
  customStomp.subscribe(
    clientId,     // 客户端ID
    queue.value,        // 队列名称作为订阅ID
    `/queue/${queue.value}`,     // 交换机名称作为目标地址
    handleMessage // 消息处理回调函数
  );
  customStomp.subscribe(
    clientId,     // 客户端ID
    queueCollection.value,        // 队列名称作为订阅ID
    `/queue/${queueCollection.value}`,     // 交换机名称作为目标地址
    handleMessageCollection // 消息处理回调函数
  );
  customStomp.subscribe(
    clientId,     // 客户端ID
    queueSituation.value,        // 队列名称作为订阅ID
    `/queue/${queueSituation.value}`,     // 交换机名称作为目标地址
    handleMessageSituation // 消息处理回调函数
  );
}

// 监听props.ruleForm的变化
watch(() => props.ruleForm, (newVal) => {
  if (newVal) {
    // 确保所有必要的字段都有值
    formData.value = {
      ...formData.value,
      task_status: newVal.task_status ?? 0,
      task_process: newVal.task_process ?? 0,
      task_round: newVal.task_round ?? 0,
      used_worker_num: newVal.used_worker_num ?? 0,
      remaining_worker_num: newVal.remaining_worker_num ?? 0,
    };

    // 根据任务状态控制计时器
    if (newVal.task_status === 1) {
      startTimer(false); // 传入false表示是页面刷新
      simulStore.setAllRound(newVal.task_round)
    } else {
      formData.value.task_process = newVal.task_process ?? 100;
      // 如果任务结束，计算最终运行时间
      if (newVal.task_status >= 2 && newVal.task_end_time && newVal.task_start_time) {
        const endTime = new Date(newVal.task_end_time).getTime();
        const startTime = new Date(newVal.task_start_time).getTime();
        const elapsedTime = endTime - startTime;
        const seconds = Math.floor(elapsedTime / 1000);
        const hours = Math.floor(seconds / 3600) || 0;
        const minutes = Math.floor((seconds % 3600) / 60) || 0;
        const remainingSeconds = seconds % 60 || 0;
        formData.value.createTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
      }
    }

    // 如果任务状态为运行中，初始化订阅
    if (newVal.task_status === 1) {
      init();
    }
  }
}, { immediate: true, deep: true });
async function init() {
  if (props.ruleForm.task_status === 1) {
    localStorage.setItem("gameIdTuiyan", task_id)
    subscribe()
  }
}

onActivated(() => {
  init()
  if (store.getTaskId() === route.query.id as string) {
    selectValue.value = store.getCesiumRoundInfo()
  } else {
    selectValue.value = 1
  }
  getChartLine()
  getChartPie1()
  getChartPie2()
  getChartPie3()
  getChartPie4()
  getChartPie5()
  getTaskStatus()
  initStompConnect()
})

const handleClickItem = (value: any) => {
  console.log(value, 'value')
  selectValue.value = value.task_process_round
  formData.value.task_status = value.task_round_status
  // simulStore.setTaskRound(value.task_process_round)
}

// 离开页面
onBeforeRouteLeave((to, from, next) => {
  // 离开页面时，取消订阅
  customStomp.unsubscribe(clientId, queueStatus.value)
  customStomp.unsubscribe(clientId, queue.value)
  // 保存当前的局数和仿真时间到 store
  store.setCesiumRoundInfo(selectValue.value)
  store.setCesiumTuiyanTime(simulStore.getSimulTime)
  store.setTaskId(route.query.id as string)
  next()
})

</script>

<template>
  <div class="steps-wrapper">
    <div class="cpi-header-title">
      <SvgIcon name="config-title" />
      <span class="cpi-header-text">任务执行</span>
    </div>
    <div class="engine-config-title">
      <SvgIcon name="info-little-title" class="engine-config-icon" />任务状态
      {{ playLoading ? "(任务初始化中...)" : "" }}
    </div>
    <div class="task-progress">
      <div class="task-progress-title">
        <span class="video_icon" :style="{ 'cursor': playLoading ? 'not-allowed' : 'pointer' }">
          <el-tooltip effect="dark" v-if="formData.task_status !== 1" content="开始">
            <SvgIcon name="video-start" @click="handlePlay" :size="6" class="engine-config-icon svg-icon-btn"
              :class="playLoading ? 'disabled' : ''" />
          </el-tooltip>
          <el-tooltip effect="dark" v-else content="暂停">
            <SvgIcon name="video-pause" @click="handlePause" :size="6" class="engine-config-icon svg-icon-btn"
              :class="playLoading ? 'disabled' : ''" />
          </el-tooltip>
        </span>
        <span class="video_icon" style="cursor: pointer;">
          <el-tooltip effect="dark" content="停止">
            <SvgIcon name="video-stop" :size="6" @click="handleStop" class="engine-config-icon stop svg-icon-btn"
              :class="playLoading || formData.task_status == 2 || formData.task_status == 3 || formData.task_status == 0 ? 'disabled' : ''" />
          </el-tooltip>
        </span>
        <el-progress :percentage="formData.task_process" :stroke-width="15" striped
          :striped-flow="formData.task_process != 100 && formData.task_status == 1" :duration="30" />
      </div>
      <div class="task-status-header">
        <div>已运行时间：{{
          formData.createTime
          }}</div>
        <div> 剩余运行时间：{{ single_round_duration == undefined ? ' - ' : parseSecondToFormat(single_round_duration) }}</div>
        <div>局数：{{ `${formData.task_round} / ${props.ruleForm.inference_config.episode_config.max_episode}` }} 局</div>
        <div>运行数量: {{ formData.used_worker_num }}</div>
        <div>空闲数量: {{ formData.remaining_worker_num }}</div>
      </div>
    </div>
    <div class="engine-config-title">
      <SvgIcon name="info-little-title" class="engine-config-icon" />态势显示
    </div>
    <div class="engine-config-content">
      <!-- 态势地图 -->
      <div>
        <assessmentInfoTab ref="childRef" :task_id="task_id" @handleClickItem="handleClickItem" />
        <situation ref="situationTuiyan" :selectValue="selectValue" :taskStatus="formData.task_status" />
      </div>
      <!-- 数据收集==频率图表盘 -->
      <div style="margin-bottom: 20px;">
        <DataCollect :siml_times="siml_times" :series="series" />
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="engine-config-title">
          <SvgIcon name="info-little-title" class="engine-config-icon" />任务完成情况
          <div ref="chartLine" class="engine-config-chart"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="engine-config-title">
          <SvgIcon name="info-little-title" class="engine-config-icon" />资源消耗与效益
          <div ref="chartPie1" class="engine-config-chart"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="engine-config-title">
          <SvgIcon name="info-little-title" class="engine-config-icon" />战损比与损失情况
          <div ref="chartPie2" class="engine-config-chart"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="engine-config-title">
          <SvgIcon name="info-little-title" class="engine-config-icon" />时间与效率
          <div ref="chartPie3" class="engine-config-chart"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="engine-config-title">
          <SvgIcon name="info-little-title" class="engine-config-icon" />战场态势评估
          <div ref="chartPie4" class="engine-config-chart"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="engine-config-title">
          <SvgIcon name="info-little-title" class="engine-config-icon" />协同与指挥评估
          <div ref="chartPie5" class="engine-config-chart"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
.el-tag+.el-tag {
  margin-left: 10px;
}

.engine-config-content {
  background: #000;
  padding: 20px;
  border-radius: 50px 50px 0 0;
}

.steps-wrapper {
  padding: 20px;
  margin-top: 20px;
  width: 100%;
  height: auto;
  background: #031527;
}

.stop {
  color: red;
}

.task-progress {
  padding: 0 20px;

  .task-progress-title {
    width: 100%;
    display: flex;

    :deep(.el-progress) {
      flex: 1;
      display: flex;
      align-items: center;

      .el-progress-bar__inner {
        background-color: #3ac295 !important;
      }

      .el-progress__text {
        display: inline-block;
        margin-left: 10px;
      }
    }
  }
}

.svg-icon-btn.disabled {
  fill: rgba(255, 255, 255, 0.3) !important;
}

.engine-config-title {
  margin-bottom: 10px;
}

.task-status-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  line-height: 38px;
  height: 38px;
}

.engine-config-icon {
  margin-right: 10px;
}

.engine-config-chart {
  width: 100%;
  height: 267px;
  background: rgba(0, 15, 29, 0.6);
  border-radius: 4px 4px 4px 4px;
  margin-top: 20px;
}

.cpi-header-title {
  margin-bottom: 20px;
}

.cpi-header-text {
  margin-left: 6px;
}
</style>
